<template>
	<div class="group_item_main_tools">
		<div class="group_item_main_tools_item">
			<CustomButton @buttonGoodsClickHandle="buttonGoodsClickHandle" :slottype="1">
				<i :class="'icon goods'+(item.isgoods||isgoods?' on':'')" slot="goods"></i>
			</CustomButton>
			<!--CustomButton :slottype="2">
				<i class="icon comment" slot="comment"></i>
			</CustomButton>
			<CustomButton :slottype="3" @buttonShareClickHandle="buttonShareClickHandle">
				<i class="icon shareinfo" slot="shareinfo"></i>
			</CustomButton-->
			<div class="group_item_main_tools_imgsdian" v-if="item.imgs&&item.imgs.length>1">
				<div class="group_item_main_tools_imgsdian_main" :ref="'mediaScrollDianItems_'+index" :data-index="index"><span :class="currentImgDian.id === index && currentImgDian.cv === mediaindex ? 'on' : ''" v-for="(media, mediaindex) in item.imgs"></span></div>
			</div>
		</div>
		<div class="group_item_main_tools_item">
			<CustomButton :slottype="3" @buttonShareClickHandle="buttonShareClickHandle">
				<i class="icon shareinfo" slot="shareinfo"></i>
			</CustomButton>
			<!--CustomButton :slottype="4" @buttonCollectClickHandle="buttonCollectClickHandle">
				<i :class="'icon collect'+(item.iscollect||isCollect?' on':'')" slot="collect"></i>
			</CustomButton-->
		</div>
	</div>
</template>
<script>
	export default{
		name:"groups_tools",
		data: function(){
			return{}
		},
		props:["item", "index", "currentImgDian", "isgoods", "isCollect"],
		components:{
			CustomButton: r => require.ensure([], () => r(require('../components/button.vue')), 'custom_button'),
		},
		watch:{
			currentImgGoodsIndex:function(v){
				console.log(v, this.$props.index)
			}
		},
		methods:{
			buttonGoodsClickHandle: function(e){
				console.log(this.$props.isgoods)
				if(this.$props.isgoods){
					this.$emit("DelFeedsDataIsGoods", this.$props.item.newsid, this.$props.item.type);
				}else{
					this.$emit("setFeedsDataIsGoods", this.$props.item.newsid, this.$props.item.type);
				}
			},
			buttonShareClickHandle: function(e){
				this.$emit("setDialogAndShow", "share", "dislog_in_up fadeInUp", true);
			},
			buttonCollectClickHandle: function(e){
				this.$emit("setFeedsDataIsCollect", this.$props.index);
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.group_item_main_tools{
		display:flex;
		padding:20/@base 20/@base;
		.group_item_main_tools_item{
			width:99%;
			display:flex;
			.custom_button{
				i{
					margin:0 auto;
				}
			}
			&:last-child{
				width:48px;
			}
			.group_item_main_tools_imgsdian{
				width:50%;
				.group_item_main_tools_imgsdian_main{
					padding:20/@base 0;
					display: flex;
					width:50%;
					margin:0 auto;
					span{
						&.on{
							background-color: #ff6699;
							width:80%;
						}
						width:33.33%;
						height:6/@base;
						margin:0 5/@base;
						background-color: #ccc;
						border-radius: 200/@base;
						overflow:hidden;
					}
				}
			}
		}
	}
	.icon{
		&.more{
			background-size: 355px 344px;
			background-position: -331px -75px;
			width:24px;
			height:24px;
		}
		&.goods{
			background-size: 355px 344px;
    		background-position: -275px -270px;
			width:24px;
			height:24px;
			&.on{
				background-size: 355px 344px;
    			background-position: -250px -270px;
			}
		}
		&.comment{
			background-size: 355px 344px;
    		background-position: -117px -97px;
			width:24px;
			height:24px;
		}
		&.shareinfo{
			background-size: 355px 344px;
    		background-position: -123px -227px;
			width:24px;
			height:24px;
			margin:0;
		}
		&.collect{
			background-size: 355px 344px;
    		background-position: -50px -320px;
			width:24px;
			height:24px;
			&.on{
				background-size: 355px 344px;
    			background-position: -331px -275px;
			}
		}
	}
	.dialog{
		.dialog_main{
			&.dislog_in_up{
				position: absolute;
				bottom:0;
				left:0;
				right:0;
				width:100%;
				border-radius:0;
				border-top-left-radius: 8/@base;
				border-top-right-radius: 8/@base;
			}
		}
	}
</style>